<style>
  * {
    margin: 0;
    padding: 0;
  }

  :root {
    --x: 0;
    --y: 0
  }

  html,
  body {
    width: 100%;
    height: 100%;
    display: flex;
    background: url('./bg.jfif') no-repeat;
    background-size: cover;
    position: relative;

  }

  body::after {

    width: 100%;
    height: 100%;
    content: "";
    position: absolute;

    background-image: radial-gradient(circle, transparent 2%, #000 20%, #000 80%);
    background-position-x: var(--x);
    background-position-y: var(--y);
    z-index: 1;
  }

  body::before {

    width: 100%;
    height: 100%;
    content: "";
    background: url('./corsair_logo.png') no-repeat;
    background-size: 20%;
    background-position: 50% 50%;
    z-index: 10;

  }

  /* svg {
    position: absolute;
    z-index: 10;
    width: 500px;
    height: 500px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;

  } */
</style>

<body>
  <!-- <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.59 52.38" fill="#fff">
    <path
      d="M77.2,39.74v-.05A10.29,10.29,0,0,1,87.68,29.18a10.55,10.55,0,0,1,7.94,3.17L93.33,35a8.06,8.06,0,0,0-5.68-2.53c-3.86,0-6.7,3.19-6.7,7.17v.06c0,4,2.81,7.19,6.7,7.19a8,8,0,0,0,5.83-2.61l2.29,2.32a10.5,10.5,0,0,1-8.24,3.6A10.22,10.22,0,0,1,77.2,39.74Z"
      transform="translate(-13.93 -13.5)" />
    <path
      d="M101.94,39.74v-.05a10.62,10.62,0,0,1,21.23-.06v.06a10.62,10.62,0,0,1-21.23.05Zm17.49,0v-.05a7,7,0,0,0-6.9-7.23,6.87,6.87,0,0,0-6.85,7.17v.06a6.94,6.94,0,0,0,6.91,7.19A6.83,6.83,0,0,0,119.43,39.74Z"
      transform="translate(-13.93 -13.5)" />
    <path
      d="M131.41,29.53h9.05a8.22,8.22,0,0,1,5.86,2A6.16,6.16,0,0,1,148,35.94V36a6.09,6.09,0,0,1-4.82,6.15l5.49,7.69h-4.24l-5-7.08H135v7.08h-3.56Zm8.78,10.07c2.56,0,4.18-1.34,4.18-3.4v-.05c0-2.18-1.56-3.37-4.2-3.37H135V39.6Z"
      transform="translate(-13.93 -13.5)" />
    <path
      d="M154.92,46.88l2.15-2.55A9.42,9.42,0,0,0,163.48,47c2.21,0,3.6-1,3.6-2.56v0c0-1.45-.81-2.24-4.58-3.11-4.33-1-6.76-2.32-6.76-6.06v-.06c0-3.48,2.9-5.89,6.93-5.89A11.28,11.28,0,0,1,170,31.79l-1.92,2.7a9.22,9.22,0,0,0-5.51-2.09c-2.09,0-3.31,1.08-3.31,2.41v.06c0,1.57.93,2.26,4.85,3.19,4.29,1,6.5,2.58,6.5,5.95v.06c0,3.8-3,6.06-7.26,6.06A12.55,12.55,0,0,1,154.92,46.88Z"
      transform="translate(-13.93 -13.5)" />
    <path d="M185.52,29.39h3.31l8.93,20.45H194l-2.06-4.9h-9.6l-2.09,4.9h-3.65Zm5.11,12.38-3.51-8.12-3.48,8.12Z"
      transform="translate(-13.93 -13.5)" />
    <path d="M205.36,29.53h3.56V49.84h-3.56Z" transform="translate(-13.93 -13.5)" />
    <path
      d="M218.26,29.53h9.05a8.22,8.22,0,0,1,5.86,2,6.16,6.16,0,0,1,1.68,4.38V36A6.09,6.09,0,0,1,230,42.15l5.48,7.69h-4.24l-5-7.08h-4.47v7.08h-3.57Zm8.79,10.07c2.55,0,4.18-1.34,4.18-3.4v-.05c0-2.18-1.57-3.37-4.21-3.37h-5.19V39.6Z"
      transform="translate(-13.93 -13.5)" />
    <path d="M43.47,13.5S47.79,22.27,47,25.93c0,0,11.27,3.64,12.52,9.65C59.52,35.58,65.69,27.46,43.47,13.5Z"
      transform="translate(-13.93 -13.5)" />
    <path d="M39.13,26.66A39.68,39.68,0,0,1,41.37,34L35,31.59c.59-3.9-3.2-9.83-3.2-9.83Z"
      transform="translate(-13.93 -13.5)" />
    <path d="M27.73,32.7A46,46,0,0,1,29.68,39l-5.8-1.44c.6-3.9-3.08-8.62-3.08-8.62Z"
      transform="translate(-13.93 -13.5)" />
    <path
      d="M40.35,23.32S66.19,41.47,67.89,48.51c1.29,5.3-2.45,10.19-2.45,10.19s-2-13.82-51.51,7.17a26.63,26.63,0,0,0,7-20.44,26.3,26.3,0,0,0-2.43-8.88l11.6,6.16c0,.18,0,.36.05.55a40.11,40.11,0,0,1-1,13.53,31.68,31.68,0,0,0,2.95-16.6A31.93,31.93,0,0,0,29.54,30.1l12.4,8.27c.05.41.08.82.12,1.24a40,40,0,0,1-1.34,14.88,32,32,0,0,0-.37-31.17Z"
      transform="translate(-13.93 -13.5)" /></svg> -->
</body>

<script>
  document.addEventListener('mousemove', (e) => {

    // const positionX = e.pageX / document.body.clientWidth
    // const positionY = e.pageY / document.body.clientHeight

    document.body.style.setProperty('--x', `${e.pageX - document.body.clientWidth * .5}px`)
    document.body.style.setProperty('--y', `${e.pageY - document.body.clientHeight * .5}px`)
  })
</script>